<template>
    <el-dialog
        v-model="appDialog.visible"
        custom-class="app_dialog dialog_body_noPadding"
        width="845px"
        :before-close="closeDialog">
        <template #title>营销工具</template>
        <!-- tab -->
        <div class="tab_box">
            <div class="group_box">
                <el-select v-model="pageParam.poster_type" placeholder="Select" @change="initFun">
                    <el-option label="我的海报" :value="1">我的海报</el-option>
                    <el-option label="企业海报" :value="2">企业海报</el-option>
                </el-select>
                <Grouping :tree-data="treeData" @submit="getChildGroup"></Grouping>
            </div>
            <div class="pane-box">
                <el-input
                    v-model="pageParam.poster_title"
                    placeholder="搜索图片标题"
                    type="text"
                    :prefix-icon="Search"
                    @input="seachTab">
                </el-input>
                <div v-if="marketList.length > 0" class="pane-body-box">
                    <blockquote v-for="it in marketList" :key="it.id">
                        <div v-if="it.poster_url" class="item" @click="chooseItem(it)">
                            <el-image class="img" :src="it.poster_url" fit="cover">
                                <template #error>
                                    <div class="image-slot">
                                        <el-icon><icon-picture /></el-icon>
                                    </div>
                                </template>
                            </el-image>
                            <div class="desc">{{ it.title }}</div>
                            <el-checkbox v-model="it.isCheck" class="checkBox" />
                            <div class="checkbox"></div>
                        </div>
                    </blockquote>
                </div>
                <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
                <ZWPagination ref="PaginationRef" @submit="pageLimitFun" />
            </div>
        </div>
        <template #footer>
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="submitHandel">保存</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { posterList } from '@/api/highMaterial/poster';
import { ref, defineEmits, defineExpose, watch } from 'vue';
import { ElMessage } from 'element-plus';
const emit = defineEmits(['save', 'close']);
import { Search } from '@element-plus/icons-vue';
import Dialog from '@/components/Dialog.vue';
import Grouping from '../../../friendcirclemat/components/Grouping.vue';
import ZWPagination from '@/components/ZWPagination.vue';
import { getGroupMarket } from '@/api/highMaterial/poster';
import { getGroupList } from '@/api/concreation';

import { useStore } from '@/store';
const store = useStore();
const PaginationRef = ref(null);
const chooseInfo = ref([]); //当前选择的数据
const marketList = ref([]);
const posterType = ref('1');
// 关闭
const closeDialog = () => {
    appDialog.value.visible = false;
    emit('close');
};
// 保存
const submitHandel = () => {
    emit('save', {
        list: JSON.parse(JSON.stringify(chooseInfo.value)),
        idList: chooseInfo.value.map((it: any) => {
            return it.id;
        })
    });
    closeDialog();
};

const appDialog = ref({
    visible: false,
    title: '选择海报',
    width: '845px',
    cancel: closeDialog,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '确认',
    multiple: false, //是否是多选
    chooseArr: [] //回显的数据  id
});
const pageParam = ref({
    page: 1,
    page_size: 15,
    group_id: 0,
    poster_title: '',
    poster_type: 1 //1 我的海报 2 企业海报
});
const treeData = ref([]); //分组信息

// 获取分组数据
const getGroupListFun = (val?: number) => {
    //  1 我的海报  2 企业海报
    getGroupList({ type: pageParam.value.poster_type == 1 ? 9 : 10, name: '' }).then((r: any) => {
        treeData.value = r.data;
    });
};
// 获取列表
const getListFun = () => {
    posterList(pageParam.value).then((r: any) => {
        const arr: any = [];
        if (r.data) {
            r.data.forEach((item: any) => {
                if (item.poster_url) {
                    const index = appDialog.value.chooseArr.findIndex((it: any) => {
                        return it == item.id;
                    });
                    item.isCheck = index == -1 ? false : true;
                    arr.push(item);
                }
            });
            marketList.value = arr;
        }
        store.dispatch('pageTotal', r.total || 0);
    });
};

// 搜索
const seachListFun = () => {
    store.dispatch('pageTotal', 0);
    PaginationRef.value.pageInit();
    pageParam.value.page = 1;
    pageParam.value.page_size = 15;
    getListFun();
};
let time = '';
const seachTab = (val: string) => {
    if (time) {
        clearTimeout(time);
    }
    time = setTimeout(() => {
        seachListFun();
    }, 500);
};
// 初始化
const initFun = () => {
    getGroupListFun();
    chooseInfo.value = [];
    if (PaginationRef.value) {
        PaginationRef.value.pageInit();
    }
    pageParam.value = {
        page: 1,
        page_size: 15,
        group_id: 0,
        poster_title: '',
        poster_type: pageParam.value.poster_type //1 我的海报 2 企业海报
    };
    store.dispatch('pageTotal', 0);
    getListFun();
};

const chooseItem = (val: any) => {
    // 当前是多选
    val.isCheck = !val.isCheck;
    if (appDialog.value.multiple) {
        if (val.isCheck) {
            chooseInfo.value.push(val);
        } else {
            const index = chooseInfo.value.findIndex(it => {
                it.id == val.id;
            });
            chooseInfo.value.splice(index, 1);
        }
    } else {
        if (val.isCheck) {
            chooseInfo.value = [val];
        } else {
            chooseInfo.value = [];
        }
    }
    marketList.value.forEach((item: any) => {
        const index = chooseInfo.value.findIndex((it: any) => {
            return it.id == item.id;
        });
        item.isCheck = index == -1 ? false : true;
    });
};

watch(
    () => appDialog.value.visible,
    val => {
        if (val) {
            initFun();
        }
    }
);

// 分页信息
const pageLimitFun = (val: any) => {
    pageParam.value.page = val.page;
    pageParam.value.page_size = val.page_size;
    getListFun();
};

// 选择分组
const getChildGroup = (val: any) => {
    store.dispatch('pageTotal', 0);
    PaginationRef.value.pageInit();
    pageParam.value.page = 1;
    pageParam.value.page_size = 15;
    pageParam.value.group_id = val.id;
    getListFun();
};

defineExpose({
    appDialog
});
</script>
<style lang="scss" scoped>
.tab_box {
    display: flex;
    .group_box {
        min-width: 165px;
        padding-right: 12px;
        margin-right: 12px;
        border-right: solid 1px #eaeaea;
    }
    .pane-body-box {
        margin-top: 12px;
        blockquote {
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 20px;
            margin-right: 10px;
            &:nth-child(5n) {
                margin-right: 0;
            }
        }
        .item {
            display: inline-block;
            vertical-align: middle;
            width: 110px;
            position: relative;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
            .desc {
                padding-top: 8px;
            }
            .img {
                width: 110px;
                height: 110px;
            }
            .checkBox {
                position: absolute;
                top: -6px;
                left: 6px;
            }
            .checkbox {
                position: absolute;
                top: 0;
                width: 30px;
                height: 30px;
                left: 0px;
                z-index: 20;
                opacity: 0;
                cursor: pointer;
            }
        }
    }
}
</style>
